<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="generator" content="VuePress 2.0.0-beta.51" />
  <meta name="theme" content="VuePress Theme Hope" />
  <meta property="og:url" content="https://pro.autojs.org/docs/zh/v8/canvas.html">
  <meta property="og:site_name" content="Auto.js Pro文档">
  <meta property="og:title" content="canvas - 画布">
  <meta property="og:type" content="article">
  <meta property="og:updated_time" content="2022-10-23T08:33:41.000Z">
  <meta property="og:locale" content="zh-CN">
  <meta property="og:locale:alternate" content="en-US">
  <meta property="article:modified_time" content="2022-10-23T08:33:41.000Z">
  <link rel="alternate" hreflang="en-us" href="https://pro.autojs.org/docs/en/zh/v8/canvas.html">
  <link rel="icon" href="https://pro.autojs.org/docs/favicon.ico">
  <link rel="manifest" href="https://pro.autojs.org/docs/manifest.webmanifest" crossorigin="use-credentials">
  <meta name="theme-color" content="#46bd87">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>canvas - 画布 | Auto.js Pro文档</title>
  <meta name="description" content="支持Node.js的自动化工作流JavaScript IDE">
  <style>
    :root {
      --bg-color: #fff;
    }

    html[data-theme="dark"] {
      --bg-color: #1d2025;
    }

    html,
    body {
      background-color: var(--bg-color);
    }
  </style>
  <script>
    const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
    const systemDarkMode =
      window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches;

    if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
      document.querySelector("html").setAttribute("data-theme", "dark");
    }
  </script>
  <link rel="stylesheet" href="../../assets/style.ae9cb182.css">
  <link rel="modulepreload" href="../../assets/app.6aa2b576.js">
  <link rel="modulepreload" href="../../assets/canvas.html.88450b11.js">
  <link rel="modulepreload" href="../../assets/_plugin-vue_export-helper.cdc0426e.js">
  <link rel="modulepreload" href="../../assets/canvas.html.9d24dc83.js">
</head>

<body>


  <!-- Copyright � 2008. Spidersoft Ltd -->
  <style>
    A.applink:hover {
      border: 2px dotted #DCE6F4;
      padding: 2px;
      background-color: #ffff00;
      color: green;
      text-decoration: none
    }

    A.applink {
      border: 2px dotted #DCE6F4;
      padding: 2px;
      color: #2F5BFF;
      background: transparent;
      text-decoration: none
    }

    A.info {
      color: #2F5BFF;
      background: transparent;
      text-decoration: none
    }

    A.info:hover {
      color: green;
      background: transparent;
      text-decoration: underline
    }
  </style>


  <div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content"
      class="skip-link sr-only">Skip to content</a><!--]-->
    <div class="theme-container has-toc"><!--[--><!--[-->
      <header class="navbar">
        <div class="navbar-left"><button class="toggle-sidebar-button" title="Toggle Sidebar"><span
              class="icon"></span></button><!----><a href="../../docs.html" class="brand"><img class="logo"
              src="../../logo.png" alt="Auto.js Pro文档"><!----><span class="site-name hide-in-pad">Auto.js
              Pro文档</span></a><!----></div>
        <div class="navbar-center"><!---->
          <nav class="nav-links">
            <div class="nav-item hide-in-mobile"><a href="../../docs.html" class="nav-link"
                aria-label="Auto.js Pro"><span class="icon iconfont icon-home"></span>Auto.js Pro<!----></a></div>
            <div class="nav-item hide-in-mobile"><a href="../guide/guide.html" class="nav-link" aria-label="指南"><span
                  class="icon iconfont icon-creative"></span>指南<!----></a></div>
            <div class="nav-item hide-in-mobile"><a href="v8.html" class="nav-link active" aria-label="第一代API文档"><span
                  class="icon iconfont icon-note"></span>第一代API文档<!----></a></div>
            <div class="nav-item hide-in-mobile"><a href="../v9/v9.html" class="nav-link" aria-label="第二代API文档"><span
                  class="icon iconfont icon-note"></span>第二代API文档<!----></a></div>
            <div class="nav-item hide-in-mobile">
              <div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="官网与相关链接"><span
                    class="title"><span class="icon iconfont icon-discover"></span>官网与相关链接</span><span
                    class="arrow"></span>
                  <ul class="nav-dropdown">
                    <li class="dropdown-item"><a href="../../../pro.autojs.html" rel="noopener noreferrer"
                        target="_blank" aria-label="官网与软件下载" class="nav-link"><!---->官网与软件下载<span><svg
                            class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                            focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
                            <path fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                            </path>
                            <polygon fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                            </polygon>
                          </svg><span class="external-link-icon-sr-only">open in new window</span></span><!----></a>
                    </li>
                    <li class="dropdown-item"><a href="https://blog.autojs.org/" rel="noopener noreferrer"
                        target="_blank" aria-label="官方博客" class="nav-link"><!---->官方博客<span><svg
                            class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                            focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
                            <path fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                            </path>
                            <polygon fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                            </polygon>
                          </svg><span class="external-link-icon-sr-only">open in new window</span></span><!----></a>
                    </li>
                    <li class="dropdown-item"><a href="https://pd.qq.com/s/gosos5" rel="noopener noreferrer"
                        target="_blank" aria-label="官方频道" class="nav-link"><!---->官方频道<span><svg
                            class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                            focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
                            <path fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                            </path>
                            <polygon fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                            </polygon>
                          </svg><span class="external-link-icon-sr-only">open in new window</span></span><!----></a>
                    </li>
                  </ul>
                </button></div>
            </div>
          </nav><!---->
        </div>
        <div class="navbar-right"><!---->
          <div class="nav-item">
            <div class="dropdown-wrapper i18n-dropdown"><button class="dropdown-title" type="button"
                aria-label="选择语言"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon i18n-icon"
                  viewBox="0 0 1024 1024" fill="currentColor" aria-label="i18n icon"
                  style="width:1rem;height:1rem;vertical-align:middle;">
                  <path
                    d="M379.392 460.8 494.08 575.488l-42.496 102.4L307.2 532.48 138.24 701.44l-71.68-72.704L234.496 460.8l-45.056-45.056c-27.136-27.136-51.2-66.56-66.56-108.544h112.64c7.68 14.336 16.896 27.136 26.112 35.84l45.568 46.08 45.056-45.056C382.976 312.32 409.6 247.808 409.6 204.8H0V102.4h256V0h102.4v102.4h256v102.4H512c0 70.144-37.888 161.28-87.04 210.944L378.88 460.8zM576 870.4 512 1024H409.6l256-614.4H768l256 614.4H921.6l-64-153.6H576zM618.496 768h196.608L716.8 532.48 618.496 768z">
                  </path>
                </svg><!--]--><span class="arrow"></span>
                <ul class="nav-dropdown">
                  <li class="dropdown-item"><a href="../../en/en.html" class="nav-link"
                      aria-label="English"><!---->English<!----></a></li>
                  <li class="dropdown-item"><a aria-current="page" href="canvas.html"
                      class="router-link-active router-link-exact-active nav-link active"
                      aria-label="简体中文"><!---->简体中文<!----></a></li>
                </ul>
              </button></div>
          </div><!---->
          <div class="nav-item hide-in-mobile"><button id="appearance-switch"><svg xmlns="http://www.w3.org/2000/svg"
                class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon"
                style="display:block;">
                <path
                  d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z">
                </path>
              </svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024"
                fill="currentColor" aria-label="dark icon" style="display:none;">
                <path
                  d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z">
                </path>
              </svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024"
                fill="currentColor" aria-label="light icon" style="display:none;">
                <path
                  d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z">
                </path>
              </svg></button></div>
          <div class="search-box" role="search" data-v-f3875574><input value="" aria-label="Search" class=""
              placeholder="Search" autocomplete="off" spellcheck="false" data-v-f3875574><!----></div><!----><button
            class="toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false"
            aria-controls="nav-screen"><span class="button-container"><span class="button-top"></span><span
                class="button-middle"></span><span class="button-bottom"></span></span></button>
        </div>
      </header><!----><!--]--><!---->
      <div class="toggle-sidebar-wrapper"><span class="arrow left"></span></div>
      <aside class="sidebar"><!--[--><!----><!--]-->
        <ul class="sidebar-links">
          <li>
            <section class="sidebar-group">
              <p class="sidebar-heading"><!----><span class="title">指南</span><!----></p>
              <ul class="sidebar-links">
                <li><!--[--><a href="v8.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="阅读须知"><!---->阅读须知<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
              </ul>
            </section>
          </li>
          <li>
            <section class="sidebar-group">
              <p class="sidebar-heading"><!----><span class="title">API文档</span><!----></p>
              <ul class="sidebar-links">
                <li>
                  <section class="sidebar-group"><button class="sidebar-heading clickable"><!----><span
                        class="title">自动化 -
                        控件操作</span><span class="arrow down"></span></button>
                    <ul class="sidebar-links">
                      <li><!--[--><a href="./automator/"
                          class="router-link-active router-link-exact-active nav-link sidebar-link sidebar-page"
                          aria-label="入门介绍" aria-current="page"><!---->入门介绍<!----></a>
                        <ul class="sidebar-sub-headers"></ul><!--]-->
                      </li>
                      <li><!--[--><a href="./automator/selector.html" class="nav-link sidebar-link sidebar-page"
                          aria-label="选择器"><!---->选择器<!----></a>
                        <ul class="sidebar-sub-headers"></ul><!--]-->
                      </li>
                      <li><!--[--><a href="./automator/uiobject.html" class="nav-link sidebar-link sidebar-page"
                          aria-label="控件和控件集合"><!---->控件和控件集合<!----></a>
                        <ul class="sidebar-sub-headers"></ul><!--]-->
                      </li>
                      <li><!--[--><a href="./automator/api.html" class="nav-link sidebar-link sidebar-page"
                          aria-label="automator与其他函数"><!---->automator与其他函数<!----></a>
                        <ul class="sidebar-sub-headers"></ul><!--]-->
                      </li>
                    </ul>
                  </section>
                </li>
                <li><!--[--><a href="./coordinatesBasedAutomation.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="自动化 - 坐标操作"><!---->自动化 -
                    坐标操作<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./app.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="app - 应用"><!---->app -
                    应用<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./base64.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="base64"><!---->base64<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./colors.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="colors - 颜色"><!---->colors - 颜色<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./canvas.html" class="nav-link sidebar-link sidebar-page active"
                    aria-label="canvas - 画布"><!---->canvas - 画布<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./console.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="console - 控制台"><!---->console - 控制台<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./crypto.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="crypto - 加解密与消息摘要"><!---->crypto - 加解密与消息摘要<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./debug.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="debug - 调试工具"><!---->debug - 调试工具<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./device.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="device - 设备"><!---->device - 设备<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./dialogs.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="dialogs - 对话框"><!---->dialogs - 对话框<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./engines.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="engines - 脚本引擎"><!---->engines - 脚本引擎<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./events.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="events - 事件与监听"><!---->events - 事件与监听<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./floaty.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="floaty - 悬浮窗"><!---->floaty - 悬浮窗<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./files.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="files - 文件系统"><!---->files - 文件系统<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./globals.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="globals - 全局变量与函数"><!---->globals - 全局变量与函数<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./http.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="http - HTTP网络请求"><!---->http - HTTP网络请求<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./images.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="images - 图片处理"><!---->images - 图片处理<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./keys.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="keys - 按键模拟"><!---->keys
                    - 按键模拟<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./media.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="media - 多媒体"><!---->media
                    - 多媒体<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./modules.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="module - 模块"><!---->module - 模块<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./ocr.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="ocr - 文字识别"><!---->ocr -
                    文字识别<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./plugins.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="plugins - 插件"><!---->plugins - 插件<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./powerManager.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="power_manager - 电源管理"><!---->power_manager - 电源管理<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./sensors.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="sensors - 传感器"><!---->sensors - 传感器<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./shell.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="shell - Shell命令"><!---->shell - Shell命令<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./storages.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="storages - 本地存储"><!---->storages - 本地存储<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./settings.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="settings - 设置"><!---->settings - 设置<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./threads.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="threads - 多线程"><!---->threads - 多线程<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./timers.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="timers - 定时器"><!---->timers - 定时器<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./timedTasks.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="work_manager - 定时与任务"><!---->work_manager - 定时与任务<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li>
                  <section class="sidebar-group"><button class="sidebar-heading clickable"><!----><span
                        class="title">ui - 用户界面</span><span class="arrow down"></span></button>
                    <ul class="sidebar-links">
                      <li><a href="/docs_bak/zh/v8/ui/ui.html" class="nav-link sidebar-link sidebar-page"
                             aria-label="ui入门介绍"><!---->ui入门介绍<!----></a>
                        <ul class="sidebar-sub-headers"></ul>
                      </li>
                      <li><a href="/docs_bak/zh/v8/ui/basic.html" class="nav-link sidebar-link sidebar-page"
                             aria-label="基础布局与控件"><!---->基础布局与控件<!----></a>
                        <ul class="sidebar-sub-headers"></ul>
                      </li>
                      <li><a href="/docs_bak/zh/v8/ui/advanced.html" class="nav-link sidebar-link sidebar-page"
                             aria-label="其他布局与控件"><!---->其他布局与控件<!----></a>
                        <ul class="sidebar-sub-headers"></ul>
                      </li>
                      <li><a href="/docs_bak/zh/v8/ui/api.html" class="nav-link sidebar-link sidebar-page"
                             aria-label="api文档"><!---->api文档<!----></a>
                        <ul class="sidebar-sub-headers"></ul>
                      </li>
                      <li><a href="/docs_bak/zh/v8/ui/customWidget.html" class="nav-link sidebar-link sidebar-page"
                             aria-label="自定义控件"><!---->自定义控件<!----></a>
                        <ul class="sidebar-sub-headers"></ul>
                      </li>
                      <li><a aria-current="page" href="/docs_bak/zh/v8/ui/webview.html"
                          class="router-link-active router-link-exact-active nav-link sidebar-link sidebar-page"
                          aria-label="使用Web编写界面"><!---->使用Web编写界面<!----></a>
                        <ul class="sidebar-sub-headers"></ul>
                      </li>
                    </ul>
                  </section>
                </li>
                <li><!--[--><a href="./util.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="util - 工具"><!---->util -
                    工具<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./webSocket.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="WebSocket"><!---->WebSocket<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
                <li><!--[--><a href="./zip.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="zip - 压缩与解压"><!---->zip -
                    压缩与解压<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
              </ul>
            </section>
          </li>
          <li>
            <section class="sidebar-group">
              <p class="sidebar-heading"><!----><span class="title">进阶</span><!----></p>
              <ul class="sidebar-links">
                <li><!--[--><a href="scriptingJava.html" class="nav-link sidebar-link sidebar-page"
                    aria-label="和Java交互"><!---->和Java交互<!----></a>
                  <ul class="sidebar-sub-headers"></ul><!--]-->
                </li>
              </ul>
            </section>
          </li>
        </ul><!--[--><!----><!--]-->
      </aside><!--[-->
      <main class="page" id="main-content"><!--[--><!---->
        <nav class="breadcrumb disable"></nav>
        <div class="page-title">
          <h1><!---->canvas - 画布</h1>
          <div class="page-info"><span class="date-info" aria-label="写作日期📅" data-balloon-pos="down"><svg
                xmlns="http://www.w3.org/2000/svg" class="icon calendar-icon" viewBox="0 0 1024 1024"
                fill="currentColor" aria-label="calendar icon">
                <path
                  d="M716.4 110.137c0-18.753-14.72-33.473-33.472-33.473-18.753 0-33.473 14.72-33.473 33.473v33.473h66.993v-33.473zm-334.87 0c0-18.753-14.72-33.473-33.473-33.473s-33.52 14.72-33.52 33.473v33.473h66.993v-33.473zm468.81 33.52H716.4v100.465c0 18.753-14.72 33.473-33.472 33.473a33.145 33.145 0 01-33.473-33.473V143.657H381.53v100.465c0 18.753-14.72 33.473-33.473 33.473a33.145 33.145 0 01-33.473-33.473V143.657H180.6A134.314 134.314 0 0046.66 277.595v535.756A134.314 134.314 0 00180.6 947.289h669.74a134.36 134.36 0 00133.94-133.938V277.595a134.314 134.314 0 00-133.94-133.938zm33.473 267.877H147.126a33.145 33.145 0 01-33.473-33.473c0-18.752 14.72-33.473 33.473-33.473h736.687c18.752 0 33.472 14.72 33.472 33.473a33.145 33.145 0 01-33.472 33.473z">
                </path>
              </svg><span>2022年10月22日</span>
              <meta property="datePublished" content="2022-10-22T07:36:15.000Z">
            </span></div>
          <hr>
        </div>
        <div class="toc-place-holder">
          <aside id="toc">
            <div class="toc-header">此页内容</div>
            <div class="toc-wrapper">
              <ul class="toc-list"><!--[-->
                <li class="toc-item"><a aria-current="page" href="https://pro.autojs.org/docs/zh/v8/canvas.html#常用方法索引"
                    class="router-link-active router-link-exact-active toc-link level2">常用方法索引</a></li>
                <!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-getwidth"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.getWidth()</a></li>
                <!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-getheight"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.getHeight()</a></li>
                <!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawrgb-r-g-b"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawRGB(r, g, b)</a></li>
                <!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawargb-a-r-g-b"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawARGB(a, r, g, b)</a>
                </li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawcolor-color"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawColor(color)</a></li>
                <!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawcolor-color-mode"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawColor(color,
                    mode)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawpaint-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawPaint(paint)</a></li>
                <!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawpoint-x-y-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawPoint(x, y,
                    paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawpoints-pts-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawPoints(pts,
                    paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawline-startx-starty-stopx-stopy-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawLine(startX, startY,
                    stopX, stopY, paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawlines-pts-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawLines(pts, paint)</a>
                </li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawrect-r-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawRect(r, paint)</a>
                </li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawrect-left-top-right-bottom-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawRect(left, top,
                    right, bottom, paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawoval-oval-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawOval(oval, paint)</a>
                </li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawoval-left-top-right-bottom-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawOval(left, top,
                    right, bottom, paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawcircle-cx-cy-radius-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawCircle(cx, cy,
                    radius, paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawarc-oval-startangle-sweepangle-usecenter-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawArc(oval, startAngle,
                    sweepAngle, useCenter, paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawarc-left-top-right-bottom-startangle-sweepangle-usecenter-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawArc(left, top, right,
                    bottom, startAngle, sweepAngle, useCenter, paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawroundrect-rect-rx-ry-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawRoundRect(rect, rx,
                    ry, paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawroundrect-left-top-right-bottom-rx-ry-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawRoundRect(left, top,
                    right, bottom, rx, ry, paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawpath-path-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawPath(path, paint)</a>
                </li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawbitmap-bitmap-left-top-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawBitmap(bitmap, left,
                    top, paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawpicture-picture"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawPicture(picture)</a>
                </li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawtext-text-x-y-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawText(text, x, y,
                    paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-drawtextonpath-text-path-hoffset-voffset-paint"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.drawTextOnPath(text,
                    path, hOffset, vOffset, paint)</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-translate-dx-dy"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.translate(dx, dy)</a>
                </li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-scale-sx-sy-px-py"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.scale(sx, sy[, px,
                    py])</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-rotate-degrees-px-py"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.rotate(degrees[, px,
                    py])</a></li><!----><!--]--><!--[-->
                <li class="toc-item"><a aria-current="page"
                    href="https://pro.autojs.org/docs/zh/v8/canvas.html#canvas-skew-sx-sy"
                    class="router-link-active router-link-exact-active toc-link level2">canvas.skew(sx, sy)</a></li>
                <!----><!--]-->
              </ul>
            </div>
          </aside>
        </div><!---->
        <div class="theme-hope-content">
          <h1 id="canvas-画布" tabindex="-1"><a class="header-anchor" href="#canvas-画布" aria-hidden="true">#</a> canvas -
            画布</h1>
          <p>canvas提供了使用画布进行2D画图的支持，可用于简单的小游戏开发或者图片编辑。使用canvas可以轻松地在一张图片或一个界面上绘制各种线与图形。</p>
          <div class="custom-container tip">
            <p class="custom-container-title">提示</p>
            <p>Canvas模块本质上是将 <a href="https://developer.android.google.cn/reference/android/graphics/Canvas"
                target="_blank" rel="noopener noreferrer">Android Canvas<span><svg class="external-link-icon"
                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                    viewBox="0 0 100 100" width="15" height="15">
                    <path fill="currentColor"
                      d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                    </path>
                    <polygon fill="currentColor"
                      points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                    </polygon>
                  </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>
              进行包装后的结果。本模块的部分用法和文档暂时缺失，但可以在 Android 文档中找到。请参阅 <a
                href="https://developer.android.google.cn/reference/android/graphics/Canvas" target="_blank"
                rel="noopener noreferrer">Android Canvas<span><svg class="external-link-icon"
                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                    viewBox="0 0 100 100" width="15" height="15">
                    <path fill="currentColor"
                      d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                    </path>
                    <polygon fill="currentColor"
                      points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                    </polygon>
                  </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>、<a
                href="https://developer.android.google.cn/reference/android/graphics/Paint" target="_blank"
                rel="noopener noreferrer">Android Paint<span><svg class="external-link-icon"
                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                    viewBox="0 0 100 100" width="15" height="15">
                    <path fill="currentColor"
                      d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                    </path>
                    <polygon fill="currentColor"
                      points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                    </polygon>
                  </svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 与 <a
                href="https://developer.android.google.cn/reference/android/graphics/Path" target="_blank"
                rel="noopener noreferrer">Android Path<span><svg class="external-link-icon"
                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                    viewBox="0 0 100 100" width="15" height="15">
                    <path fill="currentColor"
                      d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                    </path>
                    <polygon fill="currentColor"
                      points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                    </polygon>
                  </svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 了解更多细节。</p>
          </div>
          <p>canvas的坐标系为平面直角坐标系，以控件左上角为原点，控件上边沿为x轴正方向，控件左边沿为y轴正方向。例如分辨率为1920*1080的屏幕上，canvas控件覆盖全屏，画一条从屏幕左上角到屏幕右下角的线段为:
          </p>
          <div class="language-javascript ext-js line-numbers-mode">
            <pre class="language-javascript"><code>canvas<span class="token punctuation">.</span><span class="token function">drawLine</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1080</span><span class="token punctuation">,</span> <span class="token number">1920</span><span class="token punctuation">,</span> paint<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
            <div class="line-numbers" aria-hidden="true">
              <div class="line-number"></div>
            </div>
          </div>
          <p>canvas的绘制依赖于画笔Paint, 通过设置画笔的粗细、颜色、填充等可以改变绘制出来的图形。例如绘制一个红色实心正方形为：</p>
          <div class="language-javascript ext-js line-numbers-mode">
            <pre class="language-javascript"><code><span class="token keyword">let</span> paint <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 设置画笔为填充，则绘制出来的图形都是实心的</span>
paint<span class="token punctuation">.</span><span class="token function">setStyle</span><span class="token punctuation">(</span>Paint<span class="token punctuation">.</span>Style<span class="token punctuation">.</span><span class="token constant">FILL</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 设置画笔颜色为红色</span>
paint<span class="token punctuation">.</span><span class="token function">setColor</span><span class="token punctuation">(</span>colors<span class="token punctuation">.</span><span class="token constant">RED</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 绘制一个从坐标(0, 0)到坐标(100, 100)的正方形</span>
canvas<span class="token punctuation">.</span><span class="token function">drawRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> paint<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
            <div class="line-numbers" aria-hidden="true">
              <div class="line-number"></div>
              <div class="line-number"></div>
              <div class="line-number"></div>
              <div class="line-number"></div>
              <div class="line-number"></div>
              <div class="line-number"></div>
              <div class="line-number"></div>
            </div>
          </div>
          <p>如果要绘制正方形的边框，则通过设置画笔的Style来实现：</p>
          <div class="language-javascript ext-js line-numbers-mode">
            <pre class="language-javascript"><code><span class="token keyword">let</span> paint <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 设置画笔为描边，则绘制出来的图形都是轮廓</span>
paint<span class="token punctuation">.</span><span class="token function">setStyle</span><span class="token punctuation">(</span>Paint<span class="token punctuation">.</span>Style<span class="token punctuation">.</span><span class="token constant">STROKE</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 设置画笔颜色为红色</span>
paint<span class="token punctuation">.</span><span class="token function">setColor</span><span class="token punctuation">(</span>colors<span class="token punctuation">.</span><span class="token constant">RED</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 绘制一个从坐标(0, 0)到坐标(100, 100)的正方形</span>
canvas<span class="token punctuation">.</span><span class="token function">drawRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> paint<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
            <div class="line-numbers" aria-hidden="true">
              <div class="line-number"></div>
              <div class="line-number"></div>
              <div class="line-number"></div>
              <div class="line-number"></div>
              <div class="line-number"></div>
              <div class="line-number"></div>
              <div class="line-number"></div>
            </div>
          </div>
          <p>结合画笔，canvas可以绘制基本图形、图片等。</p>
          <h2 id="常用方法索引" tabindex="-1"><a class="header-anchor" href="#常用方法索引" aria-hidden="true">#</a> 常用方法索引</h2>
          <p>绘制颜色：</p>
          <ul>
            <li>根据R、G、B分量绘制颜色：<a href="#canvas-drawrgb-r-g-b">canvas.drawRGB(r, g, b)</a></li>
            <li>根据A、R、G、B分量绘制颜色：<a href="#canvas-draw-argba-r-g-b">canvas.drawARGB(r, g, b)</a></li>
            <li>根据颜色值绘制颜色：<a href="#canvas-drawcolor-color">canvas.drawColor(color)</a></li>
            <li>根据颜色值与混合模式绘制颜色：<a href="#canvas-drawcolor-color-mode">canvas.drawColor(color, mode)</a></li>
          </ul>
          <p>绘制画笔：</p>
          <ul>
            <li><a href="#canvas-drawpaint-paint">canvas.drawPaint(paint)</a></li>
          </ul>
          <p>绘制几何图形：</p>
          <ul>
            <li>绘制一个点：<a href="#canvas-drawpoint-x-y-paint">canvas.drawPoint(x, y, paint)</a></li>
            <li>绘制多个点：<a href="#canvas-drawpoints-pts-paint">canvas.drawPoints(pts, paint)</a></li>
            <li>绘制一条线：<a href="#canvas-drawlinestart-x-starty-stopx-stopy-paint">canvas.drawLine(startX, startY, stopX,
                stopY, paint)</a></li>
            <li>绘制多条线：<a href="#canvas-drawlines-pts-paint">canvas.drawLines(pts, paint)</a></li>
            <li>绘制矩形：<a href="#canvas-drawrect-r-paint">canvas.drawRect(r, paint)</a></li>
            <li>绘制椭圆：<a href="#canvas-drawoval-oval-paint">canvas.drawOval(oval, paint)</a></li>
            <li>绘制圆：<a href="#canvas-drawcircle-cx-cy-radius-paint">canvas.drawCircle(cx, cy, radius, paint)</a></li>
            <li>绘制弧：<a href="#canvas-drawarc-oval-startangle-sweepangle-usecenter-paint">canvas.drawArc(oval,
                startAngle, sweepAngle, useCenter, paint)</a></li>
            <li>绘制圆角矩形：<a href="#canvas-drawroundrect-rect-rx-ry-paint">canvas.drawRoundRect(rect, rx, ry, paint)</a>
            </li>
            <li>绘制路径：<a href="#canvas-drawpath-path-paint">canvas.drawPath(path, paint)</a></li>
          </ul>
          <p>绘制文字：</p>
          <ul>
            <li>沿直线绘制文字：<a href="#canvas-drawtext-text-x-y-paint">canvas.drawText(text, x, y, paint)</a></li>
            <li>沿路径绘制文字：<a href="#canvas-drawtextonpath-text-path-hoffset-voffset-paint">canvas.drawTextOnPath(text,
                path, hOffset, vOffset, paint)</a></li>
          </ul>
          <p>绘制图片：</p>
          <ul>
            <li>绘制位图：<a href="#canvas-drawbitmap-bitmap-left-top-paint">canvas.drawBitmap(bitmap, left, top, paint)</a>
            </li>
            <li>绘制图章：<a href="#canvas-drawpicture-picture">canvas.drawPicture(picture)</a></li>
          </ul>
          <p>获取画布大小：</p>
          <ul>
            <li>获取宽度：<a href="#canvas-getwidth">canvas.getWidth()</a></li>
            <li>获取高度：<a href="#canvas-getheight">canvas.getHeight()</a></li>
          </ul>
          <p>矩阵变换：</p>
          <ul>
            <li>平移：<a href="#canvas-translate-dx-dy">canvas.translate(dx, dy)</a></li>
            <li>缩放：<a href="#canvas-scale-sx-sy-px-py">canvas.scale(sx, sy[, px, py])</a></li>
            <li>旋转：<a href="#canvas-rotate-degrees-px-py">canvas.rotate(degrees[, px, py])</a></li>
            <li>切变变换：<a href="#canvas-skew-sx-sy">canvas.skew(sx, sy)</a></li>
          </ul>
          <h2 id="canvas-getwidth" tabindex="-1"><a class="header-anchor" href="#canvas-getwidth"
              aria-hidden="true">#</a> canvas.getWidth()</h2>
          <ul>
            <li>返回 {number}</li>
          </ul>
          <p>返回画布当前图层的宽度。</p>
          <h2 id="canvas-getheight" tabindex="-1"><a class="header-anchor" href="#canvas-getheight"
              aria-hidden="true">#</a> canvas.getHeight()</h2>
          <ul>
            <li>返回 {number}</li>
          </ul>
          <p>返回画布当前图层的高度。</p>
          <h2 id="canvas-drawrgb-r-g-b" tabindex="-1"><a class="header-anchor" href="#canvas-drawrgb-r-g-b"
              aria-hidden="true">#</a> canvas.drawRGB(r, g, b)</h2>
          <ul>
            <li><code><span class="token property">r</span></code> {number} 红色通道值</li>
            <li><code><span class="token property">g</span></code> {number} 绿色通道值</li>
            <li><code><span class="token property">b</span></code> {number} 蓝色通道值</li>
          </ul>
          <p>将整个可绘制区域填充为r、g、b指定的颜色。相当于
            <code>canvas<span class="token punctuation">.</span><span class="token function">drawColor</span><span class="token punctuation">(</span>colors<span class="token punctuation">.</span><span class="token function">rgb</span><span class="token punctuation">(</span>r<span class="token punctuation">,</span> g<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">)</span></code>。
          </p>
          <h2 id="canvas-drawargb-a-r-g-b" tabindex="-1"><a class="header-anchor" href="#canvas-drawargb-a-r-g-b"
              aria-hidden="true">#</a> canvas.drawARGB(a, r, g, b)</h2>
          <ul>
            <li><code><span class="token property">a</span></code> {number} 透明通道值</li>
            <li><code><span class="token property">r</span></code> {number} 红色通道值</li>
            <li><code><span class="token property">g</span></code> {number} 绿色通道值</li>
            <li><code><span class="token property">b</span></code> {number} 蓝色通道值</li>
          </ul>
          <p>将整个可绘制区域填充为a、r、g、b指定的颜色。相当于
            <code>canvas<span class="token punctuation">.</span><span class="token function">drawColor</span><span class="token punctuation">(</span>colors<span class="token punctuation">.</span><span class="token function">argb</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> r<span class="token punctuation">,</span> g<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">)</span></code>。
          </p>
          <h2 id="canvas-drawcolor-color" tabindex="-1"><a class="header-anchor" href="#canvas-drawcolor-color"
              aria-hidden="true">#</a> canvas.drawColor(color)</h2>
          <ul>
            <li><code><span class="token property">color</span></code> {number} 颜色值</li>
          </ul>
          <p>将整个可绘制区域填充为color指定的颜色。</p>
          <h2 id="canvas-drawcolor-color-mode" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawcolor-color-mode" aria-hidden="true">#</a> canvas.drawColor(color, mode)</h2>
          <ul>
            <li><code><span class="token property">color</span></code> {number} 颜色值</li>
            <li><code><span class="token property">mode</span></code> {PorterDuff.Mode} 混合模式</li>
          </ul>
          <p>将整个可绘制区域按mode指定的混合模式填充为color指定的颜色。</p>
          <h2 id="canvas-drawpaint-paint" tabindex="-1"><a class="header-anchor" href="#canvas-drawpaint-paint"
              aria-hidden="true">#</a> canvas.drawPaint(paint)</h2>
          <ul>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>将整个可绘制区域用paint指定的画笔填充。相当于绘制一个无限大的矩形，但是更快。通过该方法可以绘制一个指定的着色器的图案。</p>
          <h2 id="canvas-drawpoint-x-y-paint" tabindex="-1"><a class="header-anchor" href="#canvas-drawpoint-x-y-paint"
              aria-hidden="true">#</a> canvas.drawPoint(x, y, paint)</h2>
          <ul>
            <li><code><span class="token property">x</span></code> {number} x坐标</li>
            <li><code><span class="token property">y</span></code> {number} y坐标</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由坐标(x, y)指定的点。</p>
          <p>点的形状由画笔的线帽决定（参见paint.setStrokeCap(cap)）。 点的大小由画笔的宽度决定（参见paint.setStrokeWidth(width)）。</p>
          <blockquote>
            <p>如果画笔宽度为0，则也会绘制1个像素（若抗锯齿启用则绘制至多4个像素）。</p>
          </blockquote>
          <p>相当于
            <code>canvas<span class="token punctuation">.</span><span class="token function">drawPoints</span><span class="token punctuation">(</span><span class="token punctuation">[</span>x<span class="token punctuation">,</span> y<span class="token punctuation">]</span><span class="token punctuation">,</span> paint<span class="token punctuation">)</span></code>。
          </p>
          <h2 id="canvas-drawpoints-pts-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawpoints-pts-paint" aria-hidden="true">#</a> canvas.drawPoints(pts, paint)</h2>
          <ul>
            <li><code><span class="token property">pts</span></code> {number[]} 点坐标数组 [x0, y0, x1, y1, x2, y2, ...]</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由坐标数组指定的多个点。</p>
          <h2 id="canvas-drawline-startx-starty-stopx-stopy-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawline-startx-starty-stopx-stopy-paint" aria-hidden="true">#</a> canvas.drawLine(startX,
            startY, stopX, stopY, paint)</h2>
          <ul>
            <li><code><span class="token property">startX</span></code> {number} 起点x坐标</li>
            <li><code><span class="token property">startY</span></code> {number} 起点y坐标</li>
            <li><code><span class="token property">endX</span></code> {number} 终点x坐标</li>
            <li><code><span class="token property">endY</span></code> {number} 终点y坐标</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由起点坐标(startX, startY)和终点坐标(endX, endY)指定的线。 绘制时会忽略画笔的样式(Style)。也就是说，即使样式设为“仅填充(FILL)”也会绘制。</p>
          <p>退化为点的线（长度为0）不会被绘制。</p>
          <h2 id="canvas-drawlines-pts-paint" tabindex="-1"><a class="header-anchor" href="#canvas-drawlines-pts-paint"
              aria-hidden="true">#</a> canvas.drawLines(pts, paint)</h2>
          <ul>
            <li><code><span class="token property">pts</span></code> {number[]} 点坐标数组 [x0, y0, x1, y1, x2, y2, ...]</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由坐标数组指定的点两两连成的一系列线。</p>
          <p>每条线需要点坐标数组中的四个连续的值，因此要绘制一条线，数组必须至少包含四个值。 相当于
            <code>canvas<span class="token punctuation">.</span><span class="token function">drawLine</span><span class="token punctuation">(</span>pts<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> pts<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> pts<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> pts<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> paint<span class="token punctuation">)</span></code>
            然后
            <code>canvas<span class="token punctuation">.</span><span class="token function">drawLine</span><span class="token punctuation">(</span>pts<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> pts<span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span> pts<span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">,</span> pts<span class="token punctuation">[</span><span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">,</span> paint<span class="token punctuation">)</span></code>，之后以此类推。
          </p>
          <p>绘制时会忽略画笔的样式(Style)。也就是说，即使样式设为“仅填充(FILL)”也会绘制。</p>
          <h2 id="canvas-drawrect-r-paint" tabindex="-1"><a class="header-anchor" href="#canvas-drawrect-r-paint"
              aria-hidden="true">#</a> canvas.drawRect(r, paint)</h2>
          <ul>
            <li><code><span class="token property">r</span></code> {Rect|RectF} 矩形边界</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由矩形边界r指定的矩形。 绘制时画笔的样式(Style)决定了是否绘制矩形界线和填充矩形。</p>
          <p>相当于
            <code>canvas<span class="token punctuation">.</span><span class="token function">drawRect</span><span class="token punctuation">(</span>r<span class="token punctuation">.</span>left<span class="token punctuation">,</span> r<span class="token punctuation">.</span>top<span class="token punctuation">,</span> r<span class="token punctuation">.</span>right<span class="token punctuation">,</span> r<span class="token punctuation">.</span>bottom<span class="token punctuation">,</span> paint<span class="token punctuation">)</span></code>。
          </p>
          <h2 id="canvas-drawrect-left-top-right-bottom-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawrect-left-top-right-bottom-paint" aria-hidden="true">#</a> canvas.drawRect(left, top,
            right, bottom, paint)</h2>
          <ul>
            <li><code><span class="token property">left</span></code> {number} 矩形左边界x坐标</li>
            <li><code><span class="token property">top</span></code> {number} 矩形上边界y坐标</li>
            <li><code><span class="token property">right</span></code> {number} 矩形右边界x坐标</li>
            <li><code><span class="token property">bottom</span></code> {number} 矩形下边界y坐标</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由矩形边界(left, top) - (right, bottom)指定的矩形。 绘制时画笔的样式(Style)决定了是否绘制矩形界线和填充矩形。</p>
          <h2 id="canvas-drawoval-oval-paint" tabindex="-1"><a class="header-anchor" href="#canvas-drawoval-oval-paint"
              aria-hidden="true">#</a> canvas.drawOval(oval, paint)</h2>
          <ul>
            <li><code><span class="token property">oval</span></code> {RectF} 椭圆的外接矩形的边界</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由矩形边界oval指定的椭圆。 绘制时画笔的样式(Style)决定了是否绘制椭圆界线和填充椭圆。</p>
          <p>相当于
            <code>canvas<span class="token punctuation">.</span><span class="token function">drawOval</span><span class="token punctuation">(</span>oval<span class="token punctuation">.</span>left<span class="token punctuation">,</span> oval<span class="token punctuation">.</span>top<span class="token punctuation">,</span> oval<span class="token punctuation">.</span>right<span class="token punctuation">,</span> oval<span class="token punctuation">.</span>bottom<span class="token punctuation">,</span> paint<span class="token punctuation">)</span></code>。
          </p>
          <h2 id="canvas-drawoval-left-top-right-bottom-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawoval-left-top-right-bottom-paint" aria-hidden="true">#</a> canvas.drawOval(left, top,
            right, bottom, paint)</h2>
          <ul>
            <li><code><span class="token property">left</span></code> {number} 椭圆外接矩形的左边界x坐标</li>
            <li><code><span class="token property">top</span></code> {number} 椭圆外接矩形的上边界y坐标</li>
            <li><code><span class="token property">right</span></code> {number} 椭圆外接矩形的右边界x坐标</li>
            <li><code><span class="token property">bottom</span></code> {number} 椭圆外接矩形的下边界y坐标</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由矩形边界(left, top) - (right, bottom)指定的椭圆。 绘制时画笔的样式(Style)决定了是否绘制椭圆界线和填充椭圆。</p>
          <h2 id="canvas-drawcircle-cx-cy-radius-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawcircle-cx-cy-radius-paint" aria-hidden="true">#</a> canvas.drawCircle(cx, cy, radius,
            paint)</h2>
          <ul>
            <li><code><span class="token property">cx</span></code> {number} 圆心的x坐标</li>
            <li><code><span class="token property">cy</span></code> {number} 圆心的y坐标</li>
            <li><code><span class="token property">radius</span></code> {number} 圆的半径</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由圆心(cx, cy)与半径radius指定的圆。如果半径小于等于0则不会绘制。 绘制时画笔的样式(Style)决定了是否绘制圆的界线和填充圆。</p>
          <h2 id="canvas-drawarc-oval-startangle-sweepangle-usecenter-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawarc-oval-startangle-sweepangle-usecenter-paint" aria-hidden="true">#</a>
            canvas.drawArc(oval, startAngle, sweepAngle, useCenter, paint)</h2>
          <ul>
            <li><code><span class="token property">oval</span></code> {RectF} 圆弧对应的椭圆外接矩形的边界</li>
            <li><code><span class="token property">startAngle</span></code> {number} 圆弧的起始角（以角度计算）</li>
            <li><code><span class="token property">sweepAngle</span></code> {number} 圆弧所对的圆心角（顺时针方向，以角度计算）</li>
            <li><code><span class="token property">useCenter</span></code> {boolean} 绘制路径时是否连接圆弧对应的椭圆圆心</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制指定的圆弧。 这一圆弧是由矩形边界oval指定的椭圆的一部分，起始于startAngle指定的角度，并以顺时针方向扫过sweepAngle指定的角度。</p>
          <p>如果起始角startAngle为负数或大于等于360，则绘制时起始角将对360取模。 圆弧是沿顺时针方向绘制的。起始角0°相当于从直角坐标系的0°开始绘制（即从3点钟方向沿顺时针方向绘制）。</p>
          <p>如果圆心角sweepAngle大于等于360，则此函数将绘制一个完整的椭圆。 注意，这与path.arcTo方法不同，path.arcTo会将圆心角对360取模。 如果圆心角为负数则会将圆心角对360取模。</p>
          <p>如果指定useCenter为true，在描边和填充时将会连接圆弧对应的椭圆圆心，最终将绘制出一个扇形。</p>
          <p>相当于
            <code>canvas<span class="token punctuation">.</span><span class="token function">drawArc</span><span class="token punctuation">(</span>oval<span class="token punctuation">.</span>left<span class="token punctuation">,</span> oval<span class="token punctuation">.</span>top<span class="token punctuation">,</span> oval<span class="token punctuation">.</span>right<span class="token punctuation">,</span> oval<span class="token punctuation">.</span>bottom<span class="token punctuation">,</span> startAngle<span class="token punctuation">,</span> sweepAngle<span class="token punctuation">,</span> useCenter<span class="token punctuation">,</span> paint<span class="token punctuation">)</span></code>。
          </p>
          <h2 id="canvas-drawarc-left-top-right-bottom-startangle-sweepangle-usecenter-paint" tabindex="-1"><a
              class="header-anchor" href="#canvas-drawarc-left-top-right-bottom-startangle-sweepangle-usecenter-paint"
              aria-hidden="true">#</a> canvas.drawArc(left, top, right, bottom, startAngle, sweepAngle, useCenter,
            paint)</h2>
          <ul>
            <li><code><span class="token property">left</span></code> {number} 椭圆外接矩形的左边界x坐标</li>
            <li><code><span class="token property">top</span></code> {number} 椭圆外接矩形的上边界y坐标</li>
            <li><code><span class="token property">right</span></code> {number} 椭圆外接矩形的右边界x坐标</li>
            <li><code><span class="token property">bottom</span></code> {number} 椭圆外接矩形的下边界y坐标</li>
            <li><code><span class="token property">startAngle</span></code> {number} 圆弧的起始角（以角度计算）</li>
            <li><code><span class="token property">sweepAngle</span></code> {number} 圆弧所对的圆心角（顺时针方向，以角度计算）</li>
            <li><code><span class="token property">useCenter</span></code> {boolean} 绘制路径时是否连接圆弧对应的椭圆圆心</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制指定的圆弧。这一圆弧是由矩形边界(left, top) - (right, bottom)指定的椭圆的一部分，其余参数请参见 <a
              href="#canvas-drawarcoval-startangle-sweepangle-usecenter-paint">canvas.drawArc(oval, startAngle,
              sweepAngle, useCenter, paint)</a>。</p>
          <h2 id="canvas-drawroundrect-rect-rx-ry-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawroundrect-rect-rx-ry-paint" aria-hidden="true">#</a> canvas.drawRoundRect(rect, rx, ry,
            paint)</h2>
          <ul>
            <li><code><span class="token property">rect</span></code> {RectF} 矩形边界</li>
            <li><code><span class="token property">rx</span></code> {number} 圆角在x轴上的半径</li>
            <li><code><span class="token property">ry</span></code> {number} 圆角在y轴上的半径</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由矩形边界rect、圆角半径rx、ry指定的圆角矩形。 绘制时画笔的样式(Style)决定了是否绘制圆角矩形界线和填充圆角矩形。</p>
          <p>相当于
            <code>canvas<span class="token punctuation">.</span><span class="token function">drawRoundRect</span><span class="token punctuation">(</span>rect<span class="token punctuation">.</span>left<span class="token punctuation">,</span> rect<span class="token punctuation">.</span>top<span class="token punctuation">,</span> rect<span class="token punctuation">.</span>right<span class="token punctuation">,</span> rect<span class="token punctuation">.</span>bottom<span class="token punctuation">,</span> rx<span class="token punctuation">,</span> ry<span class="token punctuation">,</span> paint<span class="token punctuation">)</span></code>。
          </p>
          <h2 id="canvas-drawroundrect-left-top-right-bottom-rx-ry-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawroundrect-left-top-right-bottom-rx-ry-paint" aria-hidden="true">#</a>
            canvas.drawRoundRect(left, top, right, bottom, rx, ry, paint)</h2>
          <ul>
            <li><code><span class="token property">left</span></code> {number} 圆角矩形左边界x坐标</li>
            <li><code><span class="token property">top</span></code> {number} 圆角矩形上边界y坐标</li>
            <li><code><span class="token property">right</span></code> {number} 圆角矩形右边界x坐标</li>
            <li><code><span class="token property">bottom</span></code> {number} 圆角矩形下边界y坐标</li>
            <li><code><span class="token property">rx</span></code> {number} 圆角在x轴上的半径</li>
            <li><code><span class="token property">ry</span></code> {number} 圆角在y轴上的半径</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制由矩形边界(left, top) - (right - bottom)、圆角半径rx、ry指定的圆角矩形。 绘制时画笔的样式(Style)决定了是否绘制圆角矩形界线和填充圆角矩形。</p>
          <h2 id="canvas-drawpath-path-paint" tabindex="-1"><a class="header-anchor" href="#canvas-drawpath-path-paint"
              aria-hidden="true">#</a> canvas.drawPath(path, paint)</h2>
          <ul>
            <li><code><span class="token property">path</span></code> {Path} 路径</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制指定的路径。 绘制时画笔的样式(Style)决定了是否描边路径和填充路径。</p>
          <h2 id="canvas-drawbitmap-bitmap-left-top-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawbitmap-bitmap-left-top-paint" aria-hidden="true">#</a> canvas.drawBitmap(bitmap, left,
            top, paint)</h2>
          <ul>
            <li><code><span class="token property">bitmap</span></code> {Bitmap} 位图</li>
            <li><code><span class="token property">left</span></code> {number} x坐标</li>
            <li><code><span class="token property">top</span></code> {number} y坐标</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制指定的位图，使它的左上角位于(left, top)指定的坐标，并应用画布的变换矩阵。</p>
          <div class="custom-container tip">
            <p class="custom-container-title">提示</p>
            <p>如果画笔指定了遮罩过滤器并且该过滤器范围比位图大（超出位图的长/宽）（如 BlurMaskFilter），位图将会像被应用了CLAMP铺展模式的着色器一样绘制。因此超出位图原始范围的颜色将会重复使用边缘的颜色。
            </p>
          </div>
          <p>如果位图bitmap与画布canvas的密度不同，在绘制时位图将会被缩放至与画布相同密度再绘制。</p>
          <h2 id="canvas-drawpicture-picture" tabindex="-1"><a class="header-anchor" href="#canvas-drawpicture-picture"
              aria-hidden="true">#</a> canvas.drawPicture(picture)</h2>
          <ul>
            <li><code><span class="token property">picture</span></code> {Picture} 图章</li>
          </ul>
          <p>保存画布的变换矩阵与可绘制区域范围，在可绘制区域绘制指定的图章，随后恢复画布的变换矩阵与可绘制区域范围。 该过程与
            <code>picture<span class="token punctuation">.</span><span class="token function">draw</span><span class="token punctuation">(</span>canvas<span class="token punctuation">)</span></code>
            不同，因为后者不会进行保存与恢复的操作。</p>
          <div class="custom-container tip">
            <p class="custom-container-title">提示</p>
            <p>绘制图章将会强制图章退出录制模式（即调用
              <code>picture<span class="token punctuation">.</span><span class="token function">endRecording</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>）以准备之后的绘制。
            </p>
          </div>
          <h2 id="canvas-drawtext-text-x-y-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawtext-text-x-y-paint" aria-hidden="true">#</a> canvas.drawText(text, x, y, paint)</h2>
          <ul>
            <li><code><span class="token property">text</span></code> {string} 文字</li>
            <li><code><span class="token property">x</span></code> {number} x坐标</li>
            <li><code><span class="token property">y</span></code> {number} y坐标</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域绘制指定的文字，使文字的原点位于(x, y)。文字的起始位置取决于paint的对齐选项。 文字的样式取决于paint的相关设置。</p>
          <h2 id="canvas-drawtextonpath-text-path-hoffset-voffset-paint" tabindex="-1"><a class="header-anchor"
              href="#canvas-drawtextonpath-text-path-hoffset-voffset-paint" aria-hidden="true">#</a>
            canvas.drawTextOnPath(text, path, hOffset, vOffset, paint)</h2>
          <ul>
            <li><code><span class="token property">text</span></code> {string} 文字</li>
            <li><code><span class="token property">path</span></code> {Path} 路径</li>
            <li><code><span class="token property">hOffset</span></code> {number} 在与路径平行方向的偏移，取正为沿路径方向平移</li>
            <li><code><span class="token property">vOffset</span></code> {number} 在与路径垂直方向的偏移，取正为向文字的下方平移</li>
            <li><code><span class="token property">paint</span></code> {Paint} 画笔</li>
          </ul>
          <p>在可绘制区域沿着指定的路径绘制指定的文字。文字的起始位置取决于paint的对齐选项。 文字的样式取决于paint的相关设置。</p>
          <h2 id="canvas-translate-dx-dy" tabindex="-1"><a class="header-anchor" href="#canvas-translate-dx-dy"
              aria-hidden="true">#</a> canvas.translate(dx, dy)</h2>
          <ul>
            <li><code><span class="token property">dx</span></code> {number} 向x轴正方向平移的距离，负数表示反方向平移</li>
            <li><code><span class="token property">dy</span></code> {number} 向y轴正方向平移的距离，负数表示反方向平移</li>
          </ul>
          <p>将当前的变换矩阵右乘指定的平移变换矩阵。相当于将坐标系平移指定距离。</p>
          <h2 id="canvas-scale-sx-sy-px-py" tabindex="-1"><a class="header-anchor" href="#canvas-scale-sx-sy-px-py"
              aria-hidden="true">#</a> canvas.scale(sx, sy[, px, py])</h2>
          <ul>
            <li><code><span class="token property">sx</span></code> {number} 在x轴上缩放的倍数，负数表示沿x轴翻转</li>
            <li><code><span class="token property">sy</span></code> {number} 在y轴上缩放的倍数，负数表示沿y轴翻转</li>
            <li><code><span class="token property">px</span></code> {number} 缩放中心的x坐标，默认为0</li>
            <li><code><span class="token property">py</span></code> {number} 缩放中心的y坐标，默认为0</li>
          </ul>
          <p>将当前的变换矩阵右乘指定的缩放变换矩阵。相当于以(px, py)为中心将坐标系缩放指定的倍数。 倍数大于 1 表示放大，小于 1 表示缩小。</p>
          <h2 id="canvas-rotate-degrees-px-py" tabindex="-1"><a class="header-anchor"
              href="#canvas-rotate-degrees-px-py" aria-hidden="true">#</a> canvas.rotate(degrees[, px, py])</h2>
          <ul>
            <li><code><span class="token property">degrees</span></code> {number} 旋转的角度（以角度计算）</li>
            <li><code><span class="token property">px</span></code> {number} 旋转中心的x坐标，默认为0</li>
            <li><code><span class="token property">py</span></code> {number} 旋转中心的y坐标，默认为0</li>
          </ul>
          <p>将当前的变换矩阵右乘指定的旋转变换矩阵。相当于以(px, py)为中心将坐标系旋转指定的角度。</p>
          <h2 id="canvas-skew-sx-sy" tabindex="-1"><a class="header-anchor" href="#canvas-skew-sx-sy"
              aria-hidden="true">#</a> canvas.skew(sx, sy)</h2>
          <ul>
            <li><code><span class="token property">sx</span></code> {number} x轴方向的切变系数</li>
            <li><code><span class="token property">sy</span></code> {number} y轴方向的切变系数</li>
          </ul>
          <p>将当前的变换矩阵右乘指定的切变变换矩阵。</p>
        </div><!---->
        <footer class="page-meta"><!---->
          <div class="meta-item update-time"><span class="label">上次编辑于: </span><!----></div>
          <div class="meta-item contributors"><span class="label">贡献者: </span><!--[--><!--[--><span class="contributor"
              title="email: 946994919@qq.com">hyb1996</span><!--]--><!--]--></div>
        </footer>
        <nav class="page-nav"><a href="colors.html" class="nav-link prev" aria-label="colors - 颜色">
            <div class="hint"><span class="arrow left"></span>上一页</div>
            <div class="link"><!---->colors - 颜色</div>
          </a><a href="console.html" class="nav-link next" aria-label="console - 控制台">
            <div class="hint">下一页<span class="arrow right"></span></div>
            <div class="link">console - 控制台<!----></div>
          </a></nav><!----><!----><!--]-->
      </main><!--]--><!----><!--]-->
    </div><!--]--><!----><!----><!--]-->
  </div>
  <script type="module" src="../../assets/app.6aa2b576.js" defer></script>
</body>

</html>